<template>
  <div class="container">
    <!-- 头部区 -->
    <MyHeader></MyHeader>

    <!--各个板块区域 -->
    <div class="plateAera">
    <div class='PlateHeader' v-if='section'>
       <h3>{{section.name}}</h3>
       <p>{{section.detail}}</p>
    </div>
      <el-row class="box-card">
        <el-col :span="7" v-for="item in PlateList" :key="item.index">
          <el-card :body-style="{ padding: '0px' }" shadow="always">
            <!-- 帖子展示图片 -->
            <img v-if="item.post" :src="item.post.image1" class="image" />
            <div style="padding: 10px">
              <span @click="godetail(item.post.sid, item.post.pid)" v-if="item.post">{{
                item.post.topic | ellipsis
              }}</span>
              <!-- 头像 -->
              <el-popover placement="top-start" width="200" trigger="hover">
                <div v-if="item.user">
                  <div class="userInfo">
                    <img class="userInfo" :src="item.user.portrait" alt="" />
                  </div>
                  <p>{{ item.user.username }}</p>
                  <p>{{ item.user.introduction }}</p>
                </div>
                <div slot="reference" class="userInfo" v-if="item.user">
                  <img :src="item.user.portrait" alt="" />
                </div>
              </el-popover>
              <!-- 用户名 -->
              <div class="username" v-if="item.user">
                <span>{{ item.user.username }}</span>
              </div>
              <div class="bottom clearfix">
                <span class="time" v-if='item.post'>{{
                  new Date(item.post.registerTime).toLocaleString()
                }}</span>
                <el-button
                  type="text"
                  class="button"
                  @click="godetail(item.post.sid, item.post.pid)"
                  >more</el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import {
  getAllPost

} from '@/api/services/backstage.services'
import { plate } from '@/api/services/article.services'
export default {
  name: 'page-plate',
  components: {
    MyHeader
  },
  data () {
    return {
      imgurl: 'https://www.keaidian.com/uploads/allimg/190424/24110307_20.jpg',
      avatar:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F64%2F0d%2Fae%2F640dae9832158294570a6fc4febce63e_15.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651818323&t=711f5462d336b1a565fb704f5b073b55',
      PlateList: {
        sid: ''
      },
      lastSid: '',
      section: {},
      currentDate: []
    }
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    }
  },
  mounted () {
    this.lastSid = this.$route.query.sid
    console.log('123', this.lastSid)
    this.getPlateList(this.$route.query.sid)
  },
  methods: {
    async getPlateList (sid) {
      this.PlateList.sid = sid
      const data = await plate(sid, this.PlateList)
      this.PlateList = data.postInfos
      this.section = data.section
      console.log(data)
    },
    godetail (sid, pid) {
      this.$router.push(`detail?sid=${sid}&pid=${pid}`)
    },
    // pagesize 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getPlateList()
    },
    // 页码值 改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getPlateList()
    }
  }
}
</script>

<style lang="less" scoped>
.plateAera {
  min-width: 1100px;
}
.plateAera h3 {
  text-indent:2rem;
  color: #333;
}
.PlateHeader{
  box-sizing:border-box;
  width:100%;
  border-bottom: 1px solid #e6e6e6;
}
.PlateHeader p{
  position:relative;
  top:-8px;
   text-indent:3rem;
}
.el-col-7 {
  width: 25%;
}
.box-card {
  // cursor: pointer;
  flex-wrap: wrap;
}
.el-card {
  box-sizing: border-box;
  width: 272px;
  height: 280px;
  margin-left: 8px;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}
.el-card span {
  cursor: pointer;
}
.userInfo {
  width: 50px;
  height: 50px;
}
.userInfo img {
  width: 100%;
  height: 50px;
  border: 1px solid red;
  border-radius: 50%;
}
.username {
  // position: relative;
  // font-size: 14px;
  // text-align: center;
  // top: -18px;
  // width: 60% !important;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  line-height: 8px;
}

.button {
  padding: 0;
  margin-top: 5px;
  float: right;
}

.image {
  height: 130px;
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
